<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="">
    <!-- modal:隐私授权弹窗-->
    <view v-if="show" class="modal-box" @tap.stop>
      <view class="dialog" @tap.stop>
        <view class="title">隐私政策提示</view>
        <view class="content">
          欢迎使用便民停车微信小程序，请您在使用前点击
          <text class="text-[#243245]" hover-class="hover" @click="openContract">
            {{ name }}
          </text>
          并仔细阅读，如您同意全部内容，请点击同意开始使用我们的服务。
        </view>
        <view class="btn-box">
          <button class="btn disagree" hover-class="hover" @click="disagreePrivacy">不同意</button>
          <button
            class="btn bg-primary text-white"
            hover-class="hover"
            id="agree-btn"
            open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="agreePrivacy"
          >
            同意
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const name = ref<string>('')
const show = ref<boolean>(false)

interface PrivacyRes {
  errMsg: string
  privacyContractName: string
  needAuthorization: boolean
}

// @ts-expect-error wx.getPrivacySetting is a WeChat Mini Program API not in types
if (wx.getPrivacySetting) {
  // @ts-expect-error wx.getPrivacySetting is a WeChat Mini Program API not in types
  wx.getPrivacySetting({
    success(res: PrivacyRes) {
      console.log(res)
      name.value = res.privacyContractName
      show.value = res.needAuthorization
    },
  })
}

const openContract = () => {
  // @ts-expect-error wx.openPrivacyContract is a WeChat Mini Program API not in types
  wx.openPrivacyContract({
    success: () => {},
    fail: () => {},
  })
}

const disagreeHandle = () => {
  // 用户点击拒绝后
  show.value = false
}

const disagreePrivacy = () => {
  wx.showToast({ title: '同意隐私政策后可继续使用', icon: 'none' })
  wx.exitMiniProgram()
}

const agreePrivacy = () => {
  show.value = false
}
</script>

<style lang="scss" scoped>
.modal-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

.modal-box .dialog {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 40rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
}

.modal-box .title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.modal-box .content {
  display: block;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
  text-align: justify;
}

.modal-box .btn-box {
  display: flex;
  padding: 0 30rpx;
  padding-bottom: 30rpx;
  margin-top: 50rpx;
  text-align: center;
}

.modal-box .btn::after {
  display: none;
  border: none;
}

.modal-box .btn-box .btn {
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 76rpx;
  padding: 0;
  margin: 0 10rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 76rpx;
  border-radius: 60px;
}

.modal-box .disagree {
  color: #0f0f0f;
  background: #f5f5f5;
}
</style>
